<!-- 学员:课程考核管理:题库和在线考试管理:在线考试:开始考试 -->
<template>
  <div>
    <div style="width:100% !important;padding:20px;"
         v-show="!CompleteShow">
      <el-col :span=5
              style="border-right: #004ca7 2px solid;">
        <div style="margin:5vh 0 5vh 0; ">
          <div style="line-height: 4vh; text-align:center;;"><span class="classTestDesc">{{ testDesc.clazzName }}</span></div>

        </div>
        <hr />
        <div class="settime">
          <div class="time"> {{min}}:{{sec}}</div>
          <p><img src="../../../../public/img/icon/闹钟.png"
                 alt=""><span>总剩余时间</span></p>
        </div>
        <hr />
        <div style="margin:2vh 0 5vh 0;text-align:center;">
          <div class="testMarking">提 卡</div>
          <div style="padding:0 5vh;margin:2vh 0;">
            <table class="testMarkingQuestionsTable"
                   align="center"
                   style="width:100%;">
              <tr>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">1</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">2</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions testMarkedQuestions">3</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">4</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">5</span></td>
              </tr>
              <tr>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">6</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">7</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions testMarkedQuestions">8</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">9</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">10</span></td>
              </tr>
              <tr>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">11</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">12</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions testMarkedQuestions">13</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions">14</span></td>
                <td><span @click="onBtnMarkingQuestionHandling"
                        class="testMarkingQuestions testMarkedQuestions">15</span></td>
              </tr>
            </table>
            <div class="lizi">
              <div>
                <span @click="onBtnMarkingQuestionHandling"
                      class="  yizuo"></span>已做
              </div>
              <div> <span @click="onBtnMarkingQuestionHandling"
                      class=" weizuo"></span>未做</div>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :span=15>
        <div style="margin:3vh 0 0 0;">
          <el-col :span=2>
            <div class="questionNo">{{ questionModel.num }}.</div>
          </el-col>
          <el-col :span=22>
            <div style="padding:0 10px 0 10px;">
              <div class="questionTitle"><span class="questionType"></span>{{ questionModel.title }}<span class="questionType"
                      style="display:inline-block;width:1.5vh;height:1.5vh;background-color:#51aff0;"></span></div>
              <!-- <div class="questionAnswer">{{ questionModel.answer }}</div> -->
              <el-input v-model="questionModel.answer"
                        type="textarea"
                        placeholder=""></el-input>
              <div class="questionNextBtn">
                <el-button size="mini"
                           plain
                           style="height:28px;width:150px;"
                           type="success">下一题</el-button>
                <br />
                <el-button size="mini"
                           plain
                           @click="Wancheng"
                           style="height:28px;width:150px; margin-top: 50px;"
                           type="success">提交试卷</el-button>
              </div>
            </div>
          </el-col>
        </div>
      </el-col>
      <el-col :span=15
              v-if="dxtestTypeShow ">
        <div class="questionTitle"><span class="questionType"></span>{{ questionModel.title }}<span class="questionType"
                style="display:inline-block;width:1.5vh;height:1.5vh;background-color:#51aff0;"></span></div>
        <el-radio-group v-model="questionModel.answer">
          <el-radio :label="1"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">A </el-radio>
          <el-radio :label="2"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">B</el-radio>
          <el-radio :label="3"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">C </el-radio>
          <el-radio :label="4"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">D </el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span=15
              v-if="DuoxtestTypeShow ">
        <div class="questionTitle"><span class="questionType"></span>{{ questionModel.title }}<span class="questionType"
                style="display:inline-block;width:1.5vh;height:1.5vh;background-color:#51aff0;"></span></div>
        <el-radio-group v-model="questionModel.answer">
          <el-radio :label="1"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">A </el-radio>
          <el-radio :label="2"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">B</el-radio>
          <el-radio :label="3"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">C </el-radio>
          <el-radio :label="4"
                    class="myradio"
                    size="mini"
                    style="border:1px solid #004ca7;padding:5px;border-radius:5px;background-color:#ebf5ff;">D </el-radio>
        </el-radio-group>
      </el-col>
      <el-col :span=4
              style="border-left: #004ca7 2px solid;">
        <div style="text-align:center;">
          <div class="photoContainer">
            <img class="photo" />
          </div>
          <div style="padding:0 5vh;margin:2vh 0;"
               class="classTestDesc">
            姓名：{{ examinee.name }}
          </div>
          <div style="padding:0 5vh;margin:2vh 0;"
               class="classTestDesc">
            学号：{{ examinee.code }}
          </div>
        </div>
      </el-col>
    </div>
    <div v-show="CompleteShow"
         class="xitongpj">
      <p><b>{{testDesc.clazzName}}</b></p>
      <span> <span>开始时间：{{starttime}}</span>|<span>交卷时间：{{endtime}}</span></span>
      <el-tabs v-model="activeName"
               class="activeName">
        <el-tab-pane label="本次成绩"
                     name="first"
                     class="benci">
          <el-col :span=5>
            <span class="red">{{Totalscore}}</span>
            <p>试卷总分</p>
          </el-col>
          <el-col :span=15>
            <div class="center">
              {{score}}
              <span class="centerspan">总分</span>
            </div>
          </el-col>
          <el-col :span=4>
            <span class="red">{{time}}分钟</span>
            <p>用时</p>
          </el-col>

        </el-tab-pane>
        <el-tab-pane label="答题分析"
                     name="second">

          <div v-for="(item, index) in questions"
               :key="index">

            <el-col :span=23>
              <div class="questionContainer">
                <el-row>
                  <el-col :span=4><span class="questionTypeName">{{ item.typeName }}</span></el-col>
                  <el-col :span=20>
                    <el-row><span class="questionTitle">{{ item.title }}</span></el-row>
                    <el-row>
                      <div class="questionAnswers">
                        <el-row v-for="(answer, index) in item.answers"
                                :key="index"><span class="questionAnswer">{{ answer }}</span></el-row>
                      </div>
                    </el-row>
                    <el-row><span class="questionRightAnswer">正确答案：{{ item.rightAnswer }}</span></el-row>
                    <el-row><span class="questionAnswer">题目解析：{{ item.analysis }}</span></el-row>
                    <el-row><span class="questionAnswer">标签：</span><span class="questionLabel"
                            v-for="(labelItem, index) in item.labels"
                            :key="index">{{ labelItem }}</span></el-row>

                  </el-col>
                </el-row>
              </div>
            </el-col>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      questions: [
        {
          type: 'multipleChoice',
          typeName: '多选题',
          title: '下列故事不是《三国演义》中的一项是：',
          answers: ['A.三顾茅庐', 'B.三气周瑜', 'C.桃园三结义', 'D.三打祝家庄'],
          rightAnswer: 'D',
          analysis: '无解析',
          labels: ['简单', '一般'],
          capter: '第一章',
          author: '管理员',
          updateTime: '2022-10-01',
          difficulty: '1.0',
          testTimes: '100',
        },
        {
          type: 'multipleChoice',
          typeName: '多选题',
          title: '下列故事不是《三国演义》中的一项是：',
          answers: ['A.三顾茅庐', 'B.三气周瑜', 'C.桃园三结义', 'D.三打祝家庄'],
          rightAnswer: 'D',
          analysis: '无解析',
          labels: ['较难', '非常难'],
        },
      ],
      Totalscore: 100,
      score: 100,
      time: 5,
      activeName: 'second',
      endtime: '2021-2-5',
      starttime: '2021-2-9',
      CompleteShow: false,
      DuoxtestTypeShow: false,
      dxtestTypeShow: false,
      testDesc: {
        clazzName: '期中计算机课程考试',
        clazzCode: '445514123344',
        testTypeName: '期中计算机',
        testCode: '12365478',
      },
      questionModel: {
        tab: false,
        num: '10',
        title:
          '【论述题】试运用真理绝对性和真理相对性辩证统一关系的原理说明坚持和发展马克思主义的必要性。',
        answer:
          '绝对真理和相对真理的辩证统一关系\r\n第一、相互区别，二者是同一真理的两个不同的方面',
      },
      examinee: {
        name: '李思思',
        code: '123654365',
      },
      semesterArray: [
        { label: '2021下', value: '2021下' },
        { label: '2022上', value: '2022上' },
      ],
      queryForm: {
        semester: '',
      },
      resultPagin: {
        totalCount: 200,
        currentPage: 3,
        perPageCount: 50,
        start: 51,
        end: 100,
      },
      tableData: [{}, {}, {}],
      min: 30,
      sec: 0,
    }
  },
  mounted() {
    this.countdown()
  },
  methods: {
    Wancheng() {
      if (this.questionModel.tab) {
        this.$router.push({
          name: '提交考试',
        })
      } else {
        this.CompleteShow = true
      }
    },
    onBtnMarkingClickHandler: function () {},
    onBtnMarkingQuestionHandling: function () {
      this.$message('onBtnMarkingQuestionHandling')
    },
    countdown() {
      const end = Date.parse(new Date('2022-06-30 16:59:23'))
      const now = Date.parse(new Date())
      const msec = end - now
      if (msec < 0) return
      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt((msec / 1000 / 60 / 60) % 24)
      let min = parseInt((msec / 1000 / 60) % 60)
      let sec = parseInt((msec / 1000) % 60)
      this.day = day
      this.hr = hr > 9 ? hr : '0' + hr
      this.min = min > 9 ? min : '0' + min
      this.sec = sec > 9 ? sec : '0' + sec
      const that = this
      if (min >= 0 && sec >= 0) {
        //倒计时结束关闭订单
        if (min == 0 && sec == 0) {
          return
        }
        setTimeout(function () {
          that.countdown()
        }, 1000)
      }
    },
  },
}
</script>

<style lang="less" scoped>
.benci {
  p {
    color: #004ca7;
  }
}
.center {
  position: relative;
  height: 20vh;
  width: 20vh;
  line-height: 20vh;
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto;
  border: 1px solid #004ca7;
  font-size: 5vh;
  color: #ff3819;
  margin-top: 7vh;
  > p {
    text-align: center;
  }
}
.centerspan {
  color: #004ca7;
  font-size: 16px;
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
}
.activeName {
  margin: 0 auto;
  width: 70%;
}
.red {
  display: block;
  margin-top: 10vh;
  font-size: 3vh;
  color: #ff3819;
}
.time {
  margin-top: 50px;
  text-align: center;
  font-weight: 700;
  font-size: 53px;
  color: #53aff6;
}
.settime {
  p {
    color: #004ca7;
    height: 20px;
    text-align: center;
    margin-top: 39px;
    position: relative;
    > span {
      position: absolute;
      top: 51%;
      left: 45%;
    }
    > img {
      position: absolute;
      top: 13%;
      left: 33%;
    }
  }
  height: 200px;
}
.lizi {
  display: flex;
  justify-content: center;
  margin-top: 90px;
  div {
    line-height: 4vh;
  }
}
.yizuo {
  line-height: 2vh;
  width: 10px;
  height: 4vh;
  float: left;
  display: block;
  color: #ffffff;
  line-height: 4vh;
  background-color: #53aff6;
  width: 4vh;
  border-radius: 4px;
  border: 2px solid #53aff6;
}
.weizuo {
  line-height: 2vh;
  float: left;
  width: 10px;
  height: 4vh;
  display: block;
  color: #ffffff;
  line-height: 4vh;
  background-color: #fff;
  width: 4vh;
  border-radius: 4px;
  border: 2px solid #53aff6;
}
.questionNextBtn {
  margin: 3vh 0 0 0;
  text-align: center;
}
.questionAnswer {
  margin: 3vh 0 0 0;
  height: 50vh;
  overflow: auto;
  line-height: 30px;
}
.questionTitle {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
  line-height: 30px;
}
.questionType {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  display: inline-block;
  color: #51aff0;
}
.questionNo {
  font-size: 16px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #51aff0;
  text-align: right;
  line-height: 30px;
}
.photoContainer {
  margin: 20vh 0 0 0;
}
.photo {
  background-color: pink;
  width: 15vh;
  height: 15vh;
}
.classTestLabel {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  color: #004ca7;
  width: 15vh;
  display: inline-block;
  text-align: right;
}
.classTestDesc {
  font-size: 18px;
  font-weight: normal;
  font-family: 'Microsoft YaHei';
  color: #014da7;
}
.testMarking {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: center;
  line-height: 3vh;
  color: blue;
}
.testMarkingQuestions {
  display: inline-block;
  line-height: 4vh;
  background-color: #ffffff;
  width: 4vh;
  border: 2px solid #aaaaaa;
  border-radius: 4px;
  cursor: pointer;
}
.testMarkedQuestions {
  display: inline-block;
  color: #ffffff;
  line-height: 4vh;
  background-color: #53aff6;
  width: 4vh;
  border-radius: 4px;
  border: 2px solid #53aff6;
}
.testMarkingQuestionsTable {
  border-collapse: separate;
  border-spacing: 10px 10px;
}
div.examinationScore {
  font-size: 18px;
  font-weight: bold;
  font-family: 'Microsoft YaHei';
  text-align: center;
  line-height: 4vh;
  color: blue;
}
input.examinationScore {
  border-radius: 4px;
  border: 1px solid blue;
  width: 6vh;
  text-align: center;
  height: 3vh;
}
.xitongpj {
  text-align: center;
  > span {
    color: #666;
    font-style: 15px;
  }
  > p {
    font-size: 30px;
    text-align: center;
    color: #014da7;
    margin-bottom: 30px;
  }
}
.el-dialog__wrapper {
  ::v-deep .newClazzDialog {
    height: 93%;
  }
}
div.questionContainer {
  border: 1px solid #004ca7;
  border-radius: 5px;
  padding: 10px;
  margin: 10px 0px;
}
span.questionTypeName {
  border-radius: 5px;
  border: 1px solid #51aef6;
  background-color: #f1f8fe;
  color: #51aef6;
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
span.questionTitle {
  color: #004ca7;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
div.questionAnswers {
  padding: 0px 10px;
}
span.questionAnswer {
  font-size: 16px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
  color: #606266;
}
span.questionRightAnswer {
  color: #51aef6;
  font-size: 18px;
  font-weight: bold;
  padding: 5px;
  margin: 10px;
  line-height: 34px;
}
span.questionSomethingLabel {
  font-size: 16px;
  font-weight: bold;
  padding: 5px 1px;
  margin: 10px 20px;
  line-height: 34px;
  color: #606266;
}
span.questionSomething {
  color: #606266;
  font-size: 16px;
  font-weight: normal;
  line-height: 34px;
}
span.questionLabel {
  border-radius: 5px;
  border: 1px solid #606266;
  color: #606266;
  font-size: 16px;
  font-weight: normal;
  padding: 1px 10px;
  margin: 1px 10px;
  line-height: 30px;
}
p.autoDialogEssay {
  font-size: 18px;
  font-weight: bold;
  color: #004ca7;
}
.xpaas-vertical-align-middle {
  .el-col {
    vertical-align: middle;
    .el-button {
      margin: 5px 0 0 0;
    }
  }
}
</style>
